<!DOCTYPE html>
<html>
<head>
    <title>Manager</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        .activity {
            background-color: #009688;
            display: inline-block;
            border: 1px #fff solid;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }

        .inActivity {
            background-color: #b6b4b6;
            display: inline-block;
            text-align: center;
            border: 1px #fff solid;
            cursor: pointer;
        }

        .run {
            background-color: #2196F3;
        }

        .start {
            background-color: #FF9800;
        }

        .end {
            background-color: #9C27B0;
        }

        .top {
            position: relative;
        }

        .create-btn {
            position: absolute;
            right: 0px;
            border-bottom: none;
            padding: 3px 25px;
            background: #FF5722;
            color: #fff;
            line-height: 40px;
            height: 40px;
            top: 0;

        }

        .width-input {
            width: 100%;
            height: 40px;
            font-size: 40px;
            text-align: center;
            background-color: #e0e4e4;
        }

        body {
            margin: 8px
        }

        .do {
            border: 1px #009688 solid;
            padding: 10px 0px;
            width: 98%;
            display: inline-block;
            text-align: center;
            color: #009688;
        }
    </style>
</head>
<body>
<section style="width: 1000px">
    <form>
        <div class="row">
            <div class="col-md-6">
                <ul class="list-group">
                    <li class="list-group-item">
                        Settings
                    </li>
                    <li class="list-group-item">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">Current Level</span>
                            <input type="text" class="form-control" placeholder="Please Enter Current Level.Example:55"
                                   aria-describedby="basic-addon1" name="startSection" id="startSection" value="11">
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="input-group">
                            <span class="input-group-addon" >Running Time</span>
                            <input type="text" class="form-control" placeholder="Please Enter Current Level.Example:55"
                                    name="totalTimes" id="totalTimes" value="1">
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon2">&nbsp;&nbsp;&nbsp;Trimming &nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <input type="text" class="form-control" placeholder="Please Enter Trimming.Example:8"
                                   aria-describedby="basic-addon2" name="trimming" id="trimming" value="5">
                        </div>
                    </li>
                    <li class="list-group-item" style="text-align: right">
                        <input class="btn btn-primary" type="button" value="Start" id="startStopBtn">
                    </li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul class="list-group">
                    <li class="list-group-item">
                        Status
                    </li>
                    <li class="list-group-item">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon3">&nbsp;Device Status&nbsp;</span>
                            <span class="form-control">
                            <span class="label label-success" id="connectStatus">Connected</span>
                        </span>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon4">Running Status</span>
                            <span class="form-control">
                            <span class="label label-default" id="runningStatus">Stand by</span>
                        </span>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon5">&nbsp;&nbsp;Current Card&nbsp;&nbsp;</span>
                            <span class="form-control">
                            <span id="currentCard">Unknow</span>
                        </span>
                        </div>
                    </li>
                    <li class="list-group-item" style="text-align: right">
                        <input class="btn btn-primary" type="button" value="Refresh" id="refreshStatus">
                    </li>
                </ul>
            </div>
        </div>
    </form>
</section>
<section style="width: 1000px;height: 350px;border: 1px solid #ddd;border-radius: 4px;">
    <ul class="list-group">
        <li class="list-group-item" style="border: none;border-radius: 0px">
            Real Time Render
        </li>
    </ul>
    <div class="row">
        <div class="col-md-6" style="text-align: center">
            <h5>Native Array</h5>
            <div id="nativeArrayContent" style="width: 50%;display: inline-block;">
            </div>
        </div>
        <div class="col-md-6" style="text-align: center">
            <h5>Path Of Array</h5>
            <div id="pathArrayContent" style="width: 50%;display: inline-block;">
            </div>
        </div>
    </div>
</section>
<!--<div style="width: 500px">
    <h4>参数</h4>
    <form>
        <div class="row">
            <div class="col-md-5"><b>连接状态：</b><span id="deviceStatus"></span></div>
            <div class="col-md-5"><input type="button" id="refreshDeviceStatus" value="刷新"/></div>
        </div>
        <div class="row">
            <div class="col-md-5"><b>运行次数</b><input name="totalTimes" id="totalTimes" value="1"/></div>
            <div class="col-md-5"><b>微调参数</b><input name="trimming" id="trimming" value="8"/></div>
        </div>
        <div class="row">
            <div class="col-md-5"><b>当前关卡</b><input name="startSection" id="startSection"
                                                    value="15"/></div>
            &lt;!&ndash;      <div class="col-md-5"><b>当前关卡</b><input name="nextSectionCoordinate" id="nextSectionCoordinate"
                                                        value="555 1609"/></div>&ndash;&gt;
            <div class="col-md-5"><b>坐标</b><input name="closeGiftCoordinate" id="closeGiftCoordinate" value="925 661"/>
            </div>
        </div>

    </form>

    <br>
    <div class="row">
        <div class="col-md-4"><input type="button" id="startStopBtn" value="开始"/></div>
    </div>
    <hr/>
</div>-->
<!--<div style="width: 500px">
    <h4>状态</h4>
    <div class="row">
        <div class="col-md-4"><b>运行中：</b><span name="running" id="running">否</span></div>
        <div class="col-md-4"><b>当前次数：</b><span name="currentTime" id="currentTime">1</span></div>
        <div class="col-md-4"><input type="button" id="startStopBtn" value="开始"/></div>
    </div>
    <hr/>
</div>-->
<div style="width: 500px;height: 500px;overflow-y: hidden">
    <h4>消息栈</h4>
    <div id="track"></div>
</div>
</body>
</html>
<script>
    var globalNativeArray = {};
    $("#startStopBtn").click(function () {
        if (this.value == "Start") {
            $.post("/script/run", $("form").serialize(), function (res) {
                console.log(res);
            });
            this.value = "Stop"
        }
        else {
            $.post("/script/stop", null, function (res) {
                console.log(res);
            });
            this.value = "Start"

        }
    })
    $(document).ready(function () {
        var pid;
        window.setInterval(function () {
            //消息栈
            $.getJSON("/script/getTrack", function (res) {
                $.each(res, function () {
                    //普通消息
                    if (this.indexOf("msg:") == 0) {
                        pid = null;
                        $("#track").prepend("<p>" + this + "</p>")
                    }
                    //原始图表数据
                    else if (this.indexOf("nativeArray:") == 0) {
                        renderNativeArray(JSON.parse(this.replace("nativeArray:", "")));
                    }
                    //当前关卡数
                    else if (this.indexOf("cardNum:") == 0) {
                       $("#currentCard").text(this.replace("cardNum:", ""));
                    }
                    //路径图表
                    else if(this.indexOf("pathList:")==0){
                        renderPathArray(globalNativeArray,JSON.parse(this.replace("pathList:", "")))
                    }
                    //状态
                    else if(this.indexOf("status:")==0){
                        if(this.indexOf("sectionStart")>0){
                            $("#runningStatus").addClass("label-success").text("Running");
                            $("#nativeArrayContent").html("Loading...")
                            $("#pathArrayContent").html("Loading...")
                        }
                        else if(this.indexOf("sectionStop")>0){
                            $("#runningStatus").removeClass("label-success").text("Stand by");
                            $("#nativeArrayContent").html("Loading...")
                            $("#pathArrayContent").html("Loading...")
                        }
                        else if(this.indexOf("programStop")>0){
                            $("#runningStatus").removeClass("label-success").text("Stand by");
                            $("#startStopBtn").val("Start");
                        }
                    }
                    //百分比消息
                    else if (this.indexOf("percent:") == 0) {
                        if (!pid) {
                            pid = "p" + new Date().getTime();
                            $("#track").prepend("<p id='" + pid + "'></p>")
                        }
                        $("#" + pid).text("画线中，已完成: " + this.split("percent:")[1] + "%");
                    }
                    else {
                        pid = null;
                        $("#track").prepend("<p>" + this + "</p>")
                    }
                })
            })
        }, 300);
        //刷新状态
        $("#refreshStatus").click(function () {
            $.getJSON("/devices/list", function (res) {
                if (res.success) {
                    $("#connectStatus").text("Connected").attr("class","label label-success")
                }
                else {
                    $("#connectStatus").text("Lost Connection").attr("class","label label-default")
                }
            })
        })
        $("#refreshStatus").click();

    })

    function renderNativeArray(nativeArray) {
        globalNativeArray = nativeArray
        width = nativeArray[0].length;
        height = nativeArray.length;
        $("#nativeArrayContent").html("")
        contentWidth = $("#nativeArrayContent").width();
        itemWidth = contentWidth / (height>width?height:width);
        for (i = 0; i < height; i++) {
            $tr = $("<div></div>").css("width", "100%").css("height", itemWidth + "px")
            for (j = 0; j < width; j++) {
                $span = $("<span>&nbsp;</span>").css("width", (itemWidth - 1) + "px").css("height", (itemWidth - 1) + "px").addClass("activity").css("line-height", (itemWidth - 1) + "px");
                if(nativeArray[i][j].v==0){
                    $span[0].className ="inActivity";
                }
                else if(nativeArray[i][j].v==1){
                    $span[0].className ="activity";
                }
                else if(nativeArray[i][j].v==2){
                    $span[0].className = "start activity";
                }
                $tr.append($span)
            }
            $("#nativeArrayContent").append($tr);
        }
    }
    function renderPathArray(nativeArray,pathList) {
        width = nativeArray[0].length;
        height = nativeArray.length;
        $("#pathArrayContent").html("")
        contentWidth = $("#pathArrayContent").width();
        itemWidth = contentWidth / (height>width?height:width);
        for (i = 0; i < height; i++) {
            $tr = $("<div></div>").css("width", "100%").css("height", itemWidth + "px")
            for (j = 0; j < width; j++) {
                $span = $("<span>&nbsp;</span>").css("width", (itemWidth - 1) + "px").css("height", (itemWidth - 1) + "px").addClass("activity").css("line-height", (itemWidth - 1) + "px");
                if(nativeArray[i][j].v==0){
                    $span[0].className ="inActivity";
                }
                else if(nativeArray[i][j].v==1){
                    $span[0].className ="activity";
                }
                else if(nativeArray[i][j].v==2){
                    $span[0].className = "start activity";
                }
                $tr.append($span)
            }
            $("#pathArrayContent").append($tr);
        }
        //Render Path
        $divs = $("#pathArrayContent div");
        $.each(pathList,function(index,item){
            $($($divs[item.i]).find("span")[item.j]).text(index+1)
        })
    }



</script>



